<template>
	<view>
		<view v-show="!show">
			<view class="wrap-list">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="learindete_top">
						<view class="learindete_top_item word-box-hover d-s-c" v-for="(item, index) in list" :key="index" @tap="wordClick(index)">
							<wordTip :item="item"></wordTip>
							<view class="ww40 f36 fb">
								{{ item.word }}
							</view>
							<view class="ww40 f36 fb">
								<view v-if="(currentIndex == index && clickTimes == 2) || item.check">{{ item.chinese }}</view>
							</view>
							<view class="ww20 d-e-c">
								<view class="learindete_top_item_box1 presdete_top_item_box1 d-c-c mr20" :class="{'checked':item.check==1}" @tap.stop="wordCheck(index, 1)">
									<u-icon name="checkmark" color="#ffffff" size="36"></u-icon>
								</view>
								<view class="learindete_top_item_box2 presdete_top_item_box2 d-c-c" :class="{'checked':item.check==2}" @tap.stop="wordCheck(index, 2)">
									<u-icon name="close" color="#ffffff" size="36"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="learindete_bot d-b-c tc">
				<view class="">
					<view class="f32 fb" style="color: #387BEF;">{{ totalNum }}</view>
					<view class="gray9">总条数</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #FF620D;">{{ unableNum }}</view>
					<view class="gray9">不会</view>
				</view>
				<view class="">
					<view class="f32 fb" style="color: #387BEF;">{{ accuracy }}%</view>
					<view class="gray9">正确率</view>
				</view>
				<view class="learindete_bot_but" @tap="submit">提交</view>
			</view>
		</view>
		<view v-show="show">
			<view class="learindete_result">
				<view class="learindete_result_title">
					<image src="/static/curr/wanc_text_1.png" mode="" v-if="result1 == 1"></image>
					<image src="/static/curr/wanc_text_2.png" mode="" v-if="result1 == 2"></image>
				</view>
				<view class="learindete_result_img">
					<image src="/static/curr/wanc_back_1.png" mode="" v-if="result2 == 1"></image>
					<image src="/static/curr/wanc_back_2.png" mode="" v-if="result2 == 2"></image>
					<image src="/static/curr/wanc_back_3.png" mode="" v-if="result2 == 3"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import wordTip from '@/pages/components/wordTootip.vue'
	export default {
		components:{wordTip},
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				bookId: 0,
				show: false,
				totalNum: 0,
				ableNum: 0,
				unableNum: 0,
				ids: '',
				accuracy: 0,
				isTest: 0,
				list: [],
				result1: 0,
				result2: 0,
				currentIndex: -1,
				clickTimes: 0,
			}
		},
		onLoad(option) {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 1500)
				return false
			} else {
				if (option.bookId) {
					this.bookId = option.bookId
					this.getList()
				} else {
					uni.navigateBack()
				}
			}
		},
		methods: {
			getList() {
				this.$u.get(this.$u.api.bookExam, {
					bookId: this.bookId,
				}).then((res) => {
					let data = res.data
					this.isTest = data.is_test
					for (let i=0;i<data.list.length;i++) {
						this.totalNum++
						let temp = data.list[i]
						temp.show = false
						temp.check = false
						this.list.push(temp)
					}
				}).catch((res) => {
					console.log(res)
				})
			},
			// 点击单词
			wordClick(i) {
				if (this.currentIndex == i) {
					if (this.clickTimes == 0) {
						this.clickTimes = 1
					} else if (this.clickTimes == 1) {
						this.clickTimes = 2
					} else if (this.clickTimes == 2) {
						this.clickTimes = 0
					} else {
						return false
					}
				} else {
					this.clickTimes = 1
				}
				this.currentIndex = i
				// this.list[i].show = true
				// 获取单词音频
				this.$u.post(this.$u.api.wordVoice, {
					word: this.list[i].word,
					type: this.$store.state.voiceType
				}).then((res) => {
					this.utils.playAudio(this.imgUrl + res.data)
				}).catch((err) => {
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
			// 选择单词
			wordCheck(i, n) {
				if (this.list[i].check == n) {
					this.list[i].check = 0
				} else {
					this.list[i].check = n
					if(i < this.list.length - 1) {
						// 获取单词音频
						this.$u.post(this.$u.api.wordVoice, {
							word: this.list[i+1].word,
							type: this.$store.state.voiceType
						}).then((res) => {
							this.utils.playAudio(res.data)
						}).catch((err) => {
							console.log(err)
							uni.$u.toast(err.data.msg)
						})
					}
				}
				let able = 0
				let unable = 0
				let idArray = []
				for (let j=0;j<this.list.length;j++) {
					let words = this.list[j]
					if (words.check == 1) {
						able += 1
					}
					if (words.check == 2) {
						unable += 1
						idArray.push(words.id)
					}
				}
				this.ableNum = able
				this.unableNum = unable
				this.ids = idArray.join(',')
				this.accuracy = Math.round(able * 100 / this.totalNum)
			},
			// 提交
			submit() {
				if (this.totalNum != this.ableNum + this.unableNum) {
					uni.$u.toast('还有未检测的单词，请仔细检查')
					return false
				}
				this.$u.post(this.$u.api.bookExam, {
					bookId: this.bookId,
					ids: this.ids,
				}).then((res) => {
					if (this.accuracy == 100) {
						this.result1 = 1
						if (this.isTest == 0) {
							this.result2 = 1
						} else {
							this.result2 = 2
						}
					} else {
						this.result1 = 2
						this.result2 = 3
					}
					this.show = true
				}).catch((res) => {
					console.log(res)
					uni.$u.toast('提交失败')
					return false
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.learindete_top {
		padding-bottom: 20rpx;
	}

	.learindete_top_item {
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx auto;
		padding: 45rpx 30rpx;
		box-sizing: border-box;
	}
	
	.learindete_top_item_box1,.learindete_top_item_box2 {
		width: 50rpx;
		height: 50rpx;
		background: linear-gradient(250deg, #999999, #C8C4C4);
		border-radius: 50%;
	}
	.learindete_top_item_box1.checked {
		background: linear-gradient(250deg, #5BA9FF, #2B87F7) !important;
	}
	.learindete_top_item_box2.checked {
		background: linear-gradient(250deg, #F85548, #F77B2D) !important;
	}

	.learindete_bot {
		width: 100%;
		background-color: #ffffff;
		height: 12vh;
		padding: 0 54rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 999;
	}
	.learindete_bot_but{
		width: 216rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 40rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
	
	.learindete_result {
		padding-top: 20vh;
	}
	.learindete_result_title {
		width: 177rpx;
		height: 56rpx;
		margin: 0 auto 40rpx;
		// font-size: 60rpx;
		// color: #EF7F00;
		// text-align: center;
		// text-shadow: 0rpx 0rpx 5rpx #F06600;
		// text-stroke: 1px #EF7F00;
		// -webkit-text-stroke: 1px #EF7F00;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.learindete_result_img{
		width: 474rpx;
		height: 327rpx;
		margin: 60rpx auto 50rpx;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.learindete_result_text{
		width: 200rpx;
		height: 160rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 68rpx;
		font-weight: 500;
		color: #FFFFFF;
		// text-shadow: 0rpx 0rpx 5rpx #F06600;
		// text-stroke: 1px #EF7F00;
		// -webkit-text-stroke: 1px #EF7F00;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -70rpx;
		margin-left: -100rpx;
	}
</style>
